<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="utf-8" />  
        <title>密码修改</title>  
        <!--用百度的静态资源库的cdn安装bootstrap环境-->  
        <script src="js/jquery-2.1.1.min.js"></script>  
        <!-- Bootstrap 核心 CSS 文件 -->  
        <link href="js/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">  
       
        <script src="js/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>  
        <!--jquery.validate-->  
        <script type="text/javascript" src=js/jquery-validation-1.14.0/lib/jquery.js ></script>  
        <script  src="js/jquery-validation-1.14.0/dist/jquery.validate.min.js" ></script>  
        <script type="text/javascript" src="js/jquery-validation-1.14.0/src/localization/messages_zh.js"></script>
        <style type="text/css">  
            body{
	            background: url(js/img/115.jpg) ; 
	             background-position: center 0; 
	     	    background-repeat: no-repeat;  
	      	   background-attachment: fixed; 
	           background-size: cover; 
	          -webkit-background-size: cover;  
	          -o-background-size: cover;  
	          -moz-background-size: cover;  
	          -ms-background-size: cover; 
	            background-size: <span style="font-family: 微软雅黑; rgb(239, 239, 239);">cover</span>;font-size: 16px;
	            }  
	         .form{background: rgba(255,255,255,0.2);width:400px;margin:100px auto;}  
	         .fa{display: inline-block;top: 27px;left: 6px;position: relative;color: #ccc;}  
	            input[type="text"],input[type="password"]{padding-left:26px;}  
	            .checkbox{padding-left:21px;}  
	               .container{
	                display:table;
	                height:100%;
          		  }

            
        </style>  
    </head>  
    <body>  
       
    <div class="container">  
        <div class="form row">  
            <form class="form-horizontal col-sm-offset-3 col-md-offset-3" id="uppwdf">  
            	<fieldset>
                <h3 class="form-title">修改密码</h3>  
                <div class="col-sm-9 col-md-9">  
                    <div class="form-group">  
                    <!-- autofocus="autofocus" -->
                        <i class="fa fa-user fa-lg"></i>  
                        <input class="form-control required"  id="password" type="password" placeholder="请输入原密码" onblur="checkpwd()" name="username"  />  
                   	
                    </div>  
                   		<div class="alert alert-danger hide" id="unames">原密码输入错误！</div>
                   	   <div class="alert alert-danger hide" id="resuname">原密码输入正确</div> 
                   	   <div class="alert alert-danger hide" id="nonu">请输入原密码！</div>
                    <div class="form-group">  
                            <i class="fa fa-lock fa-lg"></i>  
                            <input class="form-control required" id="npassword"  onblur="checkpassWordNew()"  type="password" placeholder="请输入新密码"" name="password" >  
                    </div>  
                      <span id="passWordNewspan"  ></span>
                    <div class="form-group">  
                            <i class="fa fa-lock fa-lg"></i>  
                            <input class="form-control required" id="rnpassword" type="password" onblur="checkpassWordcrfm()" placeholder="请再次输入新密码"" name="password"  >  
                    </div>  
                     <span id="passWordcrfmpan"  ></span>
                   
					
                    <div class="form-group">  
                    <div class="alert alert-danger hide" id="adderrmsg">两次密码输入不一致！</div>
                    <div class="alert alert-danger hide" id="sbai">密码修改失败，请重新修改！</div>
                        <input onclick="seach()"  type="button" class="btn btn-large btn-danger btn-block"   value="提交 "/>
                        <input  onclick="rest()"  type="button" class="btn btn-large btn-warning btn-block"   value="重置 "/>     
   			 			  
                    </div>
                </div>  
                </fieldset>
            </form>  
        </div>  
        </div>  
    <script>
   
   
  
	   function checkpwd(){

		   var  password = $("#password").val();
		   if(password !="" && password !=null){
		   $.ajax({
			   url:"checkPassword",
				type:"post",
				data:{
					pwd : password
				},
				dataType:"json",
				success:function(res){
					if(res.success){
						 $('#resuname').attr("class","alert-danger");
						 $('#unames').hide();
						 $('#nonu').hide();
					}else{
						 $('#unames').attr("class","alert-danger");
						 $("#password").val("");
					}
				}
			   
			   
		   })
		   }else{
			  // alert("请输入原密码")
			   $('#nonu').attr("class","alert-danger");
			   return;
		   }
	   
   }
	   function checkpassWordNew(obj){
		   var npwd = $("#npassword").val();
			  /* var patrn=/^(\w){3,10}$/; */
			 
			  var patrn= /^(?=.*?[a-zA-Z])(?=.*?[0-9])[a-zA-Z0-9]{5,12}$/;
			   if (!patrn.exec(npwd)) {
				   $("#passWordNewspan").html("5-12位的字母与数字的组合")
				   $("#npassword").val("");
				   return false;
			   }else{
				   $("#passWordNewspan").html("密码符合规范");
				   
				   $("#passWordcrfmpan").html("");
				   return true;
			   }
			
		}


		function checkpassWordcrfm(obj){
			var npwd = $("#npassword").val();
    		var rnpwd = $("#rnpassword").val();
			if(npwd==rnpwd){
				$("#passWordcrfmpan").html("密码输入一致正确");
				return true;
			}else{
				$("#passWordcrfmpan").html("请输入与新密码一致的密码");
				return false;
			}
		}
	   
	   

function  rest() {
		//window.location.href="login.html";
		$("#password").val("");
		$("#npassword").val("");
		$("#rpassword").val("");
	}
function seach(){
	var pwd = $("#password").val();
	
	var npwd = $("#npassword").val();
	var rnpwd = $("#rpassword").val();

        if(checkpassWordcrfm(npwd) &&  checkpassWordNew(rnpwd)){

              $.ajax({
          		url:"updPassword",
          		data:{
          			pwd:npwd
          		},
          		type:'post',
          		dataType:'json',
          		success : function (res){
          			if(res.success){
          				window.history.go(-1);
          				$('#sbai').hide();
          			}else{
          				$('#sbai').attr("class","alert-danger");
          				} 
          				
          			}
          		});
        }
			
   }
  
</script>
</body>
</html>  